<template>
    <section>
        <el-col :span="24">
            <el-form inline @submit.native.prevent>
                <el-form-item>
                    <el-select v-model="searchRole" filterable remote placeholder="输入搜索的角色名称"
                               :remote-method="searchRoleBtn" :loading="searchRoleLoading" clearable>
                        <el-option v-for="(label,type) in roleList" :label="label" :value="type" :key="type" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="searchName" placeholder="用户名称" style="width: 120px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="status" placeholder="当前状态" style="width: 120px" clearable>
                        <el-option value="1" label="有效"></el-option>
                        <el-option value="0" label="无效"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchBtn">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%"  v-loading="loading" :height="tableHeight">
                <el-table-column type="index" label="序号" width="90"></el-table-column>
                <el-table-column prop="name" label="用户名"></el-table-column>
                <el-table-column prop="phone" label="手机号"></el-table-column>
                <el-table-column prop="role" label="角色">
                    <template slot-scope="scope">
                        {{roles[scope.row.role]}}
                    </template>
                </el-table-column>
                <el-table-column prop="is_subject" label="登录主体"></el-table-column>
<!--                <el-table-column prop="is_subject" label="登录IP"></el-table-column>-->
<!--                <el-table-column prop="is_subject" label="最近登录时间"></el-table-column>-->
                <el-table-column prop="status" label="当前状态"  align="center">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" active-color="#13ce66" :active-value=1 :inactive-value=0 @change="changStatus(scope.$index, scope.row.status)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="120">
                    <template slot-scope="scope">
                        <el-button type="text" @click="openUser(scope.$index)">修改</el-button>
<!--                        <el-button type="text" class="el-icon-search">查看</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin: 10px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--用户设置-->
        <el-dialog title="用户设置" width="500px" :visible.sync="visible" :close-on-press-escape="false" :close-on-click-modal="false">
            <el-form>
                <el-form-item label="选择角色">
                    <el-select v-model="role" filterable remote placeholder="输入搜索的角色名称" size="small" style="width: 48%"
                               :remote-method="searchRoleBtn" :loading="searchRoleLoading" clearable>
                        <el-option v-for="(label,type) in roleList" :label="label" :value="type" :key="type" ></el-option>
                    </el-select>
                    <span style="color: darkred">&nbsp;搜索输入</span>
                </el-form-item>
                <el-form-item label="手机换绑">
                    <el-input size="small" v-model.trim="phone" style="width: 48%" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="visible=false" plain>退 出</el-button>
                <el-button type="primary" size="small" @click="updateUser" :loading="userLoading">更 新</el-button>
            </div>
        </el-dialog>
    </section>
</template>
<script>
    import {userList, userSet} from "@/api/user";
    import {roleSearch} from "@/api/sys/role";

    export default {
        data() {
            return {
                searchName: '',
                searchRole: '',
                status: '',

                selectIndex: 0,
                data: [],
                user: {},
                roleList: {},
                searchRoleLoading: false,

                loading: false,
                page: 1,
                limit: 20,
                total: 0,
                tableHeight: window.innerHeight-240,

                //用户设置
                role: '',
                roles: [],
                phone: '',
                visible: false,
                userLoading: false,
            }
        },
        methods: {
            //修改状态
            changStatus(index, value){
                let msg = value ? "启用" : "禁用"
                this.$confirm(msg+"用户，请确认！！！", '提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: value ? 'success' : 'warning'
                }).then(() => {
                    let param = {
                        id: this.data[this.selectIndex].id,
                        status: value
                    };
                    userSet(param).then((res) => {
                        this.userLoading = false;
                        if(res.code === 0){
                            this.$message.success(msg+"成功");
                            this.getData();
                        }else{
                            this.$message.error(res.msg);
                            this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                        }
                    }).catch(()=>{
                        this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                    });
                }).catch(() => {
                    this.$set(this.data[index], "status", value == 1 ? 0 : 1);
                    this.$message.info("操作已取消");
                });
            },
            //打开修改
            openUser(index){
                this.role = this.data[index].role;
                this.phone = this.data[index].phone;
                this.selectIndex = index;
                this.roleList = JSON.parse(JSON.stringify(this.roles));
                this.visible = true;
            },

            //设置用户
            updateUser(){
                let param = {
                    id: this.data[this.selectIndex].id,
                    role: this.role,
                    phone: this.phone
                };
                this.userLoading = true;
                userSet(param).then((res) => {
                    this.userLoading = false;
                    if(res.code === 0){
                        this.$message.success("提示：修改用户角色成功");
                        this.visible = false;
                        this.getData();
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(()=>{
                    this.userLoading = false;
                });
            },
            //角色搜索
            searchRoleBtn(query){
                if(query == ""){
                    return;
                }
                roleSearch({label: query}).then((res) => {
                    this.roleList = res.data;
                });
            },
            searchBtn(){
                this.page = 1;
                this.getData();
            },
            //翻页
            pageChange(page){
                this.page = page;
                this.getData();
            },
            //获取数据
            getData(){
                let param = {
                    page: this.page,
                    limit: this.limit,
                    name: this.searchName,
                    role: this.searchRole,
                    status: this.status,
                };
                this.loading = true;
                userList(param).then((res) => {
                    this.loading = false;
                    this.total = res.data.total;
                    this.data = res.data.data;
                    this.roles = res.data.roles;
                });
            },
        },
        mounted(){
            this.searchBtn();
            this.user = this.$store.state.user.info;
        },
    }
</script>
